<template>
	<view class="province">
		<!-- 等级 -->
		<view class="grade">
			<view class="testop">
				<view class="buttime">
					<view class="center">
						<image class="img" src="@/static/socialized-service/breed/guanjian.png" mode="aspectFit">
						</image>
						<view class="label">级别：</view>
						<picker mode=selector @change="selectGrade" range-key="name" :value="gradeId" :range="gradeList"
							class="picker">
							<u--input v-model="gradeName" style="pointer-events: none" disabled disabledColor="#ffffff"
								placeholder="请选择" border="none"></u--input>
						</picker>
						<view class="items" v-if="gradeId !== 0">
							<view class="label">
								省市区：
							</view>
							<picker mode="multiSelector" :range="areaList" range-key="name" :value="value" @columnchange="columnchange"
								@change="bindPickerChange" class="picker">
								<u--input v-model="AllName" style="pointer-events: none" disabled disabledColor="#ffffff" border="none"
									placeholder='请选择'></u--input>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/subPage1/plugins/address.js'
	export default {
		data() {
			return {
				// 等级
				gradeList: [{
						id: 0,
						name: '国家级'
					},
					{
						id: 1,
						name: '省级'
					},
					{
						id: 2,
						name: '市级'
					},
					{
						id: 3,
						name: '区级'
					}
				],
				gradeId: 3,
				gradeName: '',
				provinceId: '',
				cityId: '',
				areaId: '',
				ProvinceName: '',
				cityName: '',
				areaName: '',
				addressList: addressList,
				areaList: [],
				AllName: '',
				selectVal: ['', '', ''],
				value: [0, 0, 0],
				index: 0,
			}
		},
		mounted() {
			this.initSelect()
			this.init()
		},
		methods: {
			init() {
				if(uni.getStorageSync('provinceAreaLevel') === 0 || uni.getStorageSync('provinceAreaLevel')) {
					this.provinceId = uni.getStorageSync('provinceProvinceId')
					this.cityId = uni.getStorageSync('provinceCityId')
					this.areaId = uni.getStorageSync('provinceAreaId')
					this.value = [this.provinceId,this.cityId,this.areaId]
					this.addressList.forEach(item1=>{
						if(item1.provinceId === this.provinceId) {
							this.ProvinceName = item1.name
							if(item1.city.length > 0) {
								item1.city.forEach(item2=>{
									if(item2.cityId === this.cityId) {
										this.cityName = item2.name
										if(item2.area.length>0) {
											item2.area.forEach(item3 =>{
												if(item3.areaId === this.areaId) {
													this.areaName = item3.name
												}
											})
										}
									}
								})
							}
						}
						this.AllName = `${this.ProvinceName} ${this.cityName} ${this.areaName}`
					})
					this.gradeId = uni.getStorageSync('provinceAreaLevel')
					this.gradeName = this.gradeList.filter(el => el.id === this.gradeId)[0].name
					if(this.gradeId === 1 && this.provinceId && !this.cityId && !this.areaId) {
						this.$emit('changeProvince',{
							provinceId: this.provinceId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					}
					if(this.gradeId === 2 && this.provinceId && this.cityId && !this.areaId) {
						console.log(this.provinceId,this.cityId);
						this.$emit('changeCity',{
							provinceId: this.provinceId,
							cityId: this.cityId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					}
					if(this.gradeId === 3 && this.provinceId && this.cityId && this.areaId) {
						console.log(this.provinceId,this.cityId);
						this.$emit('changeArea',{
							provinceId: this.provinceId,
							cityId: this.cityId,
							areaId: this.areaId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					}
					this.$emit('changeAreaLevel',{
						gradeId: this.gradeId + 1,
						init: true
					})
					console.log('存在level',this.gradeId);
				} else {
					if(uni.getStorageSync('provinceProvinceId')) {
						this.provinceId = uni.getStorageSync('provinceProvinceId')
					} else {
						this.provinceId = uni.getStorageSync('provinceId')
					}
					if(uni.getStorageSync('provinceCityId')) {
						this.cityId = uni.getStorageSync('provinceCityId')
					} else {
						this.cityId = uni.getStorageSync('cityId')
					}
					if(uni.getStorageSync('provinceAreaId')) {
						this.areaId = uni.getStorageSync('provinceAreaId')
					} else {
						this.areaId = uni.getStorageSync('areaId')
					}
					this.value = [this.provinceId,this.cityId,this.areaId]
					this.addressList.forEach(item1=>{
						if(item1.provinceId === this.provinceId) {
							this.ProvinceName = item1.name
							if(item1.city.length > 0) {
								item1.city.forEach(item2=>{
									if(item2.cityId === this.cityId) {
										this.cityName = item2.name
										if(item2.area.length>0) {
											item2.area.forEach(item3 =>{
												if(item3.areaId === this.areaId) {
													this.areaName = item3.name
												}
											})
										}
									}
								})
							}
						}
						this.AllName = `${this.ProvinceName} ${this.cityName} ${this.areaName}`
					})
					if(this.provinceId && this.cityId && this.areaId) {
						this.gradeId = 3
						this.gradeName = this.gradeList.filter(el => el.id === this.gradeId)[0].name
						this.$emit('changeArea',{
							provinceId: this.provinceId,
							cityId: this.cityId,
							areaId: this.areaId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					} 
					if(this.provinceId && this.cityId && !this.areaId) {
						this.gradeId = 2
						this.gradeName = this.gradeList.filter(el => el.id === this.gradeId)[0].name
						this.$emit('changeCity',{
							provinceId: this.provinceId,
							cityId: this.cityId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					}
					if(this.provinceId && !this.cityId && !this.areaId) {
						this.gradeId = 1
						this.gradeName = this.gradeList.filter(el => el.id === this.gradeId)[0].name
						this.$emit('changeProvince',{
							provinceId: this.provinceId,
							areaLevel: this.gradeId + 1,
							init: true
						})
						return
					}
					this.gradeId = 0
					this.gradeName = this.gradeList.filter(el => el.id === this.gradeId)[0].name
					this.$emit('changeAreaLevel',{
						gradeId: this.gradeId + 1,
						init: true
					})
				}
			},
			initSelect() {
				this.updateSourceDate() // 更新源数据
				this.updateAddressDate() // 更新结果数据
			},
			selectGrade(e) {
				uni.setStorageSync('provinceProvinceId',0)
				uni.setStorageSync('provinceCityId',0)
				uni.setStorageSync('provinceAreaId',0)
				this.gradeName = this.gradeList[e.detail.value].name
				this.gradeId = this.gradeList[e.detail.value].id
				this.AllName = ''
				uni.setStorageSync('provinceAreaLevel',this.gradeId)
				this.$emit('changeAreaLevel',{
					gradeId: this.gradeId + 1
				})
			},
			updateSourceDate() {
				this.areaList = []
				this.areaList[0] = this.addressList.map(obj => {
					return {
						name: obj.name
					}
				})
				if(this.gradeId > 1) {
					this.areaList[1] = this.addressList[this.value[0]].city.map(obj => {
						return {
							name: obj.name
						}
					})
				}
				if(this.gradeId === 3) {
					this.areaList[2] = this.addressList[this.value[0]].city[this.value[1]].area.map(obj => {
						return {
							name: obj.name
						}
					})
				}
				return this
			},
			updateSelectIndex(column, value) {
				let arr = JSON.parse(JSON.stringify(this.value))
				arr[column] = value
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},
			updateAddressDate() {
				this.selectVal[0] = this.areaList[0][this.value[0]].name
				if(this.gradeId > 1) {
					this.selectVal[1] = this.areaList[1][this.value[1]].name
				}
				if(this.gradeId === 3) {
					this.selectVal[2] = this.areaList[2][this.value[2]].name
				}

				if (this.value[0] == 0 && this.value[1] == 0 && this.value[2] == 0) {
					this.AllName = ''
				} else {
					if(this.gradeId === 1) {
						this.AllName = `${this.selectVal[0]}`
					} else if (this.gradeId === 2) {
						this.AllName = `${this.selectVal[0]} ${this.selectVal[1]}`
					} else if(this.gradeId === 3) {
						this.AllName = `${this.selectVal[0]} ${this.selectVal[1]} ${this.selectVal[2]}`
					}
				}
			},
			bindPickerChange(e) {
				let obj = addressList[this.value[0]]
				this.provinceId = obj.provinceId
				this.cityId = obj.city[this.value[1]].cityId
				this.areaId = obj.city[this.value[1]].area[this.value[2]].areaId
				let {provinceId,cityId,areaId} = this
				if(this.gradeId === 1) {
					let params = {
						provinceId,
						areaLevel: this.gradeId + 1
					}
					uni.setStorageSync('provinceProvinceId',provinceId)
					uni.setStorageSync('provinceCityId',0)
					uni.setStorageSync('provinceAreaId',0)
					this.$emit('changeProvince',params)
				} else if(this.gradeId === 2) {
					let params = {
						provinceId,
						cityId,
						areaLevel: this.gradeId + 1
					}
					uni.setStorageSync('provinceProvinceId',provinceId)
					uni.setStorageSync('provinceCityId',cityId)
					uni.setStorageSync('provinceAreaId',0)
					this.$emit('changeCity',params)
				} else if(this.gradeId === 3) {
					let params = {
						provinceId,
						cityId,
						areaId,
						areaLevel: this.gradeId + 1
					}
					uni.setStorageSync('provinceProvinceId',provinceId)
					uni.setStorageSync('provinceCityId',cityId)
					uni.setStorageSync('provinceAreaId',areaId)
					this.$emit('changeArea',params)
				}
			},
			columnchange(d) {
				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
			},
		}
	}
</script>

<style lang="scss" scoped>
	.province {
		display: flex;
		align-items: center;
		// justify-content: center;
		width: 100%;
		padding: 0 30rpx;
		margin-bottom: 16rpx;
		z-index: 10;
		box-sizing: border-box;
		position: relative;

		.grade {
			width: 100%;
			height: 80rpx;
			border-radius: 60rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			.testop {
				// width: 50%;
				width: 100%;
				color: #FFFFFF;
				height: 50rpx;
				// border-right: 4rpx #cccbce solid;
				margin-left: 5rpx;
				padding-right: 10rpx;
				font-size: 28rpx;

				&:last-child {
					border-right: none;
				}

				.buttime {
					color: #959497;
					height: 50rpx;
					white-space: nowrap;
					font-weight: 600;
					display: flex;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;
					padding-left: 94rpx;
				}

				.center {
					display: flex;
					// justify-content: center;
					align-items: center;
					width: 100%;

					image {
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 44rpx;
						// margin-left: 10rpx;
					}
				}
				::v-deep {
					.picker {
						width: 40%;
					}
					.uni-input-input,
					.uni-input-placeholder {
						font-size: 28rpx;
					}
				}
			}
		}

		.items {
			width: 85%;
			display: flex;
			.label {
				min-width: 115rpx;
				font-size: 28rpx;
				line-height: 51.2rpx;
			}
			
			.picker {
				width: 100%!important;
			}
			
			.u-input {
				// border: 2rpx solid #ccc;
				padding: 0 10rpx !important;
				width: 90%;
			}

		}
	}
</style>